Vuetify I
Vuetify ?
By Jimmy 111/03/22
Vue Review --
Folder Structure
node_modules
存放經npm/yarn安裝後的套件
public
公共檔案目錄（不經壓縮處理）
src
開發目錄上層
- assets 主要為靜態資源--css.image.icon.font...
- components 頁面元件存放路徑
- router 路由定義
- views 路由元件
- app.vue 專案主元件，在此進行路由切換
- main.js 初始化vue元件並load需要的plugins
babel.config.js
babel規則配置檔
package.json
project的元件包
yarn.lock
統一鎖定所有套件的版本號，避免不可預測的bug出現
Vuetify 基本介紹
Website = Html + Css + JavaScript
Just HTML
透過CSS來美化網頁
Vuetify：建立在Vue.js之上的一種Material Design框架
美化介面的一種工具
Vuetify基礎教學
v-app
幫助user在跨瀏覽器時，自動變更成適合那個瀏覽器的重要組件，缺乏他的話可能會造成你在跨瀏覽器時出現問題，而且還找不到原因！
（EX: Firefox執行正常，但Chrome可能直接壞掉）
v-main
讓網頁內所有的組件在畫面縮小或放大時，能夠自己適應畫面的大小，而不會直接壞掉。
v-container
幫組件跟組件之間抓出恰當的距離，才不會讓組件擠成一坨。
基本上組件都是放在v-container裡面
v-col & v-row
只能row裡面放col, 不能col裡面放row！！
v-col??
由於vuetify本身的cols，屬性是以手機為標準，並把螢幕切成12等分，所以可以想像一下card可以放多少cols在裡面。
Q:如何把手機跟電腦螢幕大小做區隔？ A:直接加屬性在col上面就行了，至於斷點的部分在說明文件上都有詳細描述。
v-card
簡單來說就是一般的卡片（ex賀禮卡），有一定的格式跟規範，如果不想follow格式的話，也可以用"v-sheet"。
再來就進入實作環節～
At first, this is our goal.
Goal
* 只要完成Card的部分就好
* ToolBar的部分是進階題，完成的人可以挑戰！
Start!!!
vue create xx
** xx為你要打的project name
再來選“Manually select features”
按照圖片選就好（一般就是再多選Router跟Vuex）就行
記得formatter選“EsLint+Prettier”
cd xx (xx為你打的project name)
vue add vuetify
等啊等...
code .